import styles from '../index.module.less';
import { fundFlowFields, fundFlowType } from '@/utils/helper';
import { useRef, useState } from 'react';
import { ProTable, ProColumns } from '@ant-design/pro-components';
import FilterSelect from './FilterSelect';
import { isSuccess } from '@/utils';
import { fundFlowApi } from '@/api';
import dayjs from 'dayjs';

export default function FundFlow({ tableWidth }: any) {
  const [list, setList] = useState<any>([]);
  const tableRef: any = useRef('');
  const [loading, setLoading] = useState(false);

  // 资金流水
  async function getData(val: any) {
    const params: any = {
      ...val,
      contract: '',
    };
    if (val?.type === 'all') delete params.type;
    setLoading(true);
    const res: any = await fundFlowApi(params);
    setLoading(false);
    if (isSuccess(res)) {
      const arr = res.data.map((item: any, i: number) => ({ ...item, idOld: item.id, id: i + 1 }));
      setList(arr);
    }
  }

  const columns: ProColumns[] = [
    {
      title: '时间',
      dataIndex: 'time',
      render: (text: any) => <>{dayjs(text * 1000).format('YYYY-MM-DD HH:mm:ss')}</>,
    },
    {
      title: '金额',
      dataIndex: 'change',
      render: (text: any) => (
        <p className={`${text > 0 ? 'color-red' : 'color-green'}`}>{text} USDT</p>
      ),
    },
    {
      title: '账户余额',
      dataIndex: 'balance',
    },
    {
      title: '操作类型',
      dataIndex: 'type',
      render: (text: any) => <p>{fundFlowType[text]}</p>,
    },
    {
      title: '合约',
      dataIndex: 'contract',
    },
    {
      title: '备注',
      dataIndex: 'text',
    },
  ];

  return (
    <div className={`${styles.xxx} xxx`}>
      <FilterSelect fields={fundFlowFields} reload={getData} />
      <ProTable
        rowKey="id"
        columns={columns}
        dataSource={list}
        actionRef={tableRef}
        search={false}
        options={false}
        pagination={false}
        scroll={{ x: tableWidth }}
        loading={loading}
      />
    </div>
  );
}
